<template>
  <footer>
    <div class="btm">
      <div v-for="(v, i) in footList" :key="i">
        <router-link :to="{ name: v.name }">
          <van-icon size="24" :name="v.icon" />
          <span>{{ v.txt }}</span>
        </router-link>
      </div>
    </div>
  </footer>
</template>

<script>
import { mapState,mapMutations } from "vuex";

import { footList } from "@/utils";

export default {
  data() {
    return {
      footList,
    };
  },
  computed:{
    ...mapState(['list']),
  },
  methods:{
    ...mapMutations(['setPlayerBtm']),
  },
  mounted(){
    if(this.list.length>0){
      this.setPlayerBtm('45px');
    }else{
      this.setPlayerBtm(0);
    }
  }
};
</script>


<style lang="scss" scoped>

footer {
  position: fixed;
  width: 100%;
  height: 45px;
  left: 0;
  bottom: 0;
  background: #fff;
  z-index: 100;
  border-top: 0.5px solid #b9b9b9;
  .btm {
    display: flex !important;
    height: 45px;
    div {
        flex:1;
      a {
        display: block;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 3px 0;
        text-align: center;
        font-family: "微软雅黑";
        color: #999;
        position: relative;
        span {
          width: 100%;
          height: 19px;
          line-height: 19px;
          font-size: 14px;
        }
        .hot {
          position: absolute;
          top: 3px;
          left: 60%;
          display: inline-block;
          width: 12px;
          height: 16px;
          font-size: 12px;
          line-height: 16px;
          border-radius: 50%;
        }
      }
      .nav-active,
      .router-link-exact-active,
      .router-link-active {
        color: inherit;
        border-color: inherit;
      }
    }
  }
}
</style>